<template>
  <view class="homeLayout pageBg">
    <custom-nav-bar title="推荐"></custom-nav-bar>
    <view class="banner">
      <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular>
        <swiper-item v-for="item in bannerList" :key="item._id">
          <image :src="item.picurl" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="notice">
      <view class="left">
        <uni-icons type="sound-filled" size="20"></uni-icons>
        <text class="text">公告</text>
      </view>
      <view class="center">
        <swiper circular vertical :autoplay="true" :interval="3000" :duration="1000">
          <swiper-item v-for="item in noticeList" :key="item._id">
            <navigator :url="'/pages/notice/detail?id='+item._id">{{item.title}}</navigator>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
        <uni-icons type="forward" size="20"></uni-icons>
      </view>
    </view>

    <view class="select">
      <common-title>
        <template #name>每日推荐</template>
        <template #custom>
          <view class="date">
            <uni-icons type="calendar" size="18"></uni-icons>
            <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
          </view>
        </template>
      </common-title>
      <view class="content">
        <scroll-view scroll-x="true">
          <view class="box" v-for="item in randomList" @click="goPreview(item._id)" :key="item._id">
            <image :src="item.smallPicurl" mode="aspectFill"></image>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="theme">
      <common-title>
        <template #name>专题精选</template>
        <template #custom>
          <uni-icons type="calender" size="30"></uni-icons>
          <navigator url="/pages/classify/classify" open-type="reLaunch" class="more">More+</navigator>
        </template>
      </common-title>

      <view class="content">
        <theme-item v-for="item in classifyList" :key="item._id" :item="item"></theme-item>
        <theme-item :isMore="true"></theme-item>
      </view>

    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import {
    apiGetBanner,
    apiGetClassify,
    apiGetDayRandom,
    apiGetNotice
  } from '@/api/apis.js'
  import {
    onShareAppMessage,
    onShareTimeline
  } from '@dcloudio/uni-app'

  // 数据
  const bannerList = ref([])
  const randomList = ref([])
  const noticeList = ref([])
  const classifyList = ref([])

  // 生命周期
  // 分享给好友
  onShareAppMessage((e) => {
    return {
      title: "小张壁纸",
      path: "pages/index/index"
    }
  })

  // 分享朋友圈
  onShareTimeline(() => {
    return {
      title: "小张壁纸"
    }
  })

  // 方法
  function goPreview(id) {
    uni.setStorageSync("storgClassList", randomList.value)
    uni.navigateTo({
      url: "/pages/preview/preview?id="+id
    })
  }

  // 接口
  // 轮播图url
  async function getBanner() {
    let res = await apiGetBanner();
    // console.log(res)
    bannerList.value = res.data

  }
  getBanner()
  // 随机获取每日推荐
  async function getDayRandom() {
    let res = await apiGetDayRandom()
    // console.log(res)
    randomList.value = res.data

  }
  getDayRandom()
  // 获取公告内容
  async function getNotice() {
    let res = await apiGetNotice({
      select: true
    })
    // console.log(res)
    noticeList.value = res.data

  }
  getNotice()

  async function getClassify() {
    let res = await apiGetClassify({
      pageSize: 8
    })
    // console.log(res)
    classifyList.value = res.data
  }
  getClassify()
</script>

<style lang="scss" scoped>
  .homeLayout {
    .banner {
      width: 750rpx;
      padding: 30rpx 0;

      swiper {
        width: 750rpx;
        height: 340rpx;

        swiper-item {
          width: 100%;
          height: 100%;
          padding: 0 30rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }

    .notice {
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #f9f9f9;
      margin: 0 auto;
      border-radius: 80rpx;
      display: flex;

      .left {
        width: 140rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        :deep() {
          .uni-icons {
            color: $brand-theme-color !important;
          }
        }


        .text {
          color: $brand-theme-color;
          font-weight: 600;
          font-size: 28rpx;

        }
      }

      .center {
        flex: 1;

        swiper {
          height: 100%;

          swiper-item {
            height: 100%;
            font-size: 30rpx;
            color: #666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }

      .right {
        width: 70rpx;

        :deep() {
          .uni-icons {
            color: $brand-theme-color !important;
          }
        }
      }
    }

    .select {
      padding-top: 50rpx;

      .date {
        color: $brand-theme-color;
        display: flex;
        align-items: center;

        :deep() {
          .uni-icons {
            color: $brand-theme-color !important;
          }
        }

        .text {
          margin-right: 5rpx;
        }
      }

      .content {
        width: 720rpx;
        margin-left: 30rpx;
        margin-top: 30rpx;

        scroll-view {
          white-space: nowrap;

          .box {
            width: 200rpx;
            height: 430rpx;
            display: inline-block;
            margin-right: 15rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 10rpx;
            }
          }

          .box:last-child {
            margin-right: 30rpx;
          }
        }
      }
    }

    .theme {
      padding: 50rpx 0;

      .more {
        font-size: 32rpx;
        color: #888;
      }

      .content {
        margin-top: 30rpx;
        padding: 0 30rpx;
        display: grid;
        gap: 15rpx;
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
</style>